<!--
 * @Autor: dingxiaolin
 * @Date: 2021-05-13 17:12:24
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-05-18 10:55:33
-->
<template>
    <div class="select">
        <div @click="show = true" class="color" style="position: relative">{{ startTime }}<i class="sanjiao"></i></div>
        <van-popup v-model:show="show" round position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="year-month"
                title="选择年月"
                :min-date="minDate"
                :max-date="maxDate"
                :formatter="formatter"
                @confirm="confirm"
                @cancel="show = false"
            />
        </van-popup>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import dateJs from 'dayjs';
export default defineComponent({
    name: 'YearMonth',
    components: {},
    props: {},
    emits: ['emit'],
    setup(props, ctx) {
        const currentDate = ref(new Date());
        const router = useRouter();
        const state = reactive({
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2099, 10, 1),
            show: false,
            startTime: dateJs(currentDate.value).format('YYYY-MM'),
            endTime: '',
            defaultYear: 0,
        });
        const formatter = (type, val) => {
            if (type === 'year') {
                return `${val}年`;
            }
            if (type === 'month') {
                return `${val}月`;
            }
            return val;
        };
        function confirm(value, index) {
            state.startTime = dateJs(value).format('YYYY-MM');
            state.show = false;
            ctx.emit('emit', state.startTime);
        }
        return {
            ...toRefs(state),
            currentDate,
            formatter,
            confirm,
        };
    },
});
</script>

<style lang="scss" scoped>
</style>
